<template>
    <div class="dcimMenuPanel">
        <vue-scroll>
            <div class="powSet">
                <el-tree
                        :data="treeData"
                        :default-expanded-keys="[1]"
                        :default-expand-all="expandAll"
                        node-key="index"
                        ref="tree"
                        highlight-current
                        :props="treeProps"
                        @node-click="handleSelectDepart"
                >
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <i :class="data.icon" v-if="!data.hasChildren"></i>
                        <span :class="[!data.hasChildren ? 'video-children' : 'video-parent']">{{ data.name }}</span>
                    </div>
                </el-tree>
            </div>
        </vue-scroll>
    </div>
</template>

<script>
    export default {
        name: "dcimMenuPanel",
        props: {
            expandAll: {
                type: Boolean,
                default: () => {
                    return true
                }
            },
            treeData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        watch: {
            treeData: function (val) {

                if(!val || val.length <= 0) return

                val[0].index = 1
            }
        },
        data() {
            return {
                treeProps: {
                    children: "children",
                    label: "name"
                }
            };
        },
        methods: {
            handleSelectDepart(data) {

                this.$emit("selectDepart", data)

            }
        }
    }
</script>

<style scoped lang="stylus">
    >>>.video-children
        vertical-align: middle
        line-height: 24px
        margin-left: 6px
    >>>.custom-tree-node
        line-height: 22px
        color: #fff
        font-size: 14px
        &:hover
            color: #b5c9f6
    >>>.el-tree
        background: transparent
    >>>.el-tree-node__expand-icon.expanded
        transform: none
    >>>.el-tree-node__expand-icon
        position: relative
        left: 0
    >>>.el-tree-node__expand-icon:before,
    >>>.video-parent:before,
    >>>.el-tree-node__children
        display: block
        content: ''
        width: 24px
        height: 24px
        line-height: 24px
        background: url('../../assets/images/menuTips.png')no-repeat
        background-position: -100px -4px
    >>>.el-tree-node__children
        width: auto
        height: auto
        background-position: -288px -4px
        background-repeat: repeat-y
    >>>.el-tree>.el-tree-node>.el-tree-node__children
        background: none
    >>>.el-tree-node__expand-icon.expanded:before {
        background-position: -132px -4px
    }
    >>>.el-tree-node__expand-icon.is-leaf:before
        background-position: -68px -4px
    >>>.video-parent
        position: relative
        display: block
        padding-left: 16px
    >>>.video-parent:before
        position: absolute
        left: -9px
        top: -1px
        background-position: -260px -4px
    .powSet
        max-height: 100%
    .dcimMenuPanel
        width: 20%
        height: 100%
        z-index: 100
</style>